<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div style="width: 500px;height: 400px;">
    <img src="" id="elephant">
  </div>
  <script>
    (function () {
      // IndexedDB
      var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
        IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
        dbVersion = 1.0;

      // Create/open database
      var request = indexedDB.open("jwFiles", dbVersion),
        db,
        createObjectStore = function (dataBase) {
          // Create an objectStore
          console.log("Creating objectStore")
          dataBase.createObjectStore("jwFiles");
        },

        getImageFile = function () {
          // Create XHR
          var xhr = new XMLHttpRequest(),
            blob;

          // xhr.open("GET", "http://192.168.1.121/vmdb-sso/rsm/cli/read/dcv_resource/cover/cover.jpg", true);
          // xhr.open("GET", "http://192.168.1.121/vmdb-sso/rsm/cli/read/dcv_resource/cover/dmv3D.png", true);
          xhr.open("GET", "http://192.168.1.121/vmdb-sso/rsm/cli/read/122/20181123/100000000040507/9DB6EDC4E8A0382DDFEF193608AD8FD1.bin", true);
          // Set the responseType to blob
          xhr.responseType = "blob";

          xhr.addEventListener("load", function () {
            if (xhr.status === 200) {
              console.log("Image retrieved");

              // Blob as response
              blob = xhr.response;
              console.log("Blob:" + blob);

              // Put the received blob into IndexedDB
              putElephantInDb(blob);
            }
          }, false);
          // Send XHR
          xhr.send();
        },

        getImgFromCache = function (transaction) {
          console.time('bin')
          transaction = transaction || db.transaction(["jwFiles"]);
          transaction.objectStore("jwFiles").get("bin").onsuccess = function (event) {
              console.timeEnd('bin')
            var imgFile = event.target.result;
            if(!imgFile){
              getImageFile();
              return;
            }
            console.log("Got bin!" + imgFile);

            // Get window.URL object
            // var URL = window.URL || window.webkitURL;
            //
            // // Create and revoke ObjectURL
            // var imgURL = URL.createObjectURL(imgFile);
            //
            // // Set img src to ObjectURL
            // var imgElephant = document.getElementById("elephant");
            // imgElephant.setAttribute("src", imgURL);

            // Revoking ObjectURL
            // URL.revokeObjectURL(imgURL);
          };
        },

        putElephantInDb = function (blob) {
          console.log("Putting elephants in IndexedDB");

          // Open a transaction to the database
          var transaction = db.transaction(["jwFiles"], "readwrite");

          // Put the blob into the dabase
          transaction.objectStore("jwFiles").put(blob, "bin");

          getImgFromCache(transaction);
        };

      request.onerror = function (event) {
        console.log("Error creating/accessing IndexedDB database");
      };

      request.onsuccess = function (event) {
        console.log("Success creating/accessing IndexedDB database");
        db = request.result;

        db.onerror = function (event) {
          console.log("Error creating/accessing IndexedDB database");
        };

        getImgFromCache();
      }

      // For future use. Currently only in latest Firefox versions
      request.onupgradeneeded = function (event) {
        createObjectStore(event.target.result);
      };
    })();

  </script>
</body>
</html>
